<template>
  <view class="container">
    <view class="tips">
      <view>操作说明：</view>
      <view>1、车辆购置费需按分期顺序连续确认账单，不支持跳期确认账单</view>
      <view>2、其他费用支持跳期确认账单，同时支持同车辆购置费批量结算</view>
    </view>
    <view class="viewports">
      <ve-card
        :title="item.feeName"
        type="none"
        :fold="false"
        v-for="(item, index) in fee.carAssetFeeList"
        :key="index"
        @click="chooseFee(index)"
      >
        <template #status>
          <view class="status-4">{{ item.feeTypeName }}</view>
          <view class="status-1">{{ item.feeStatusName }}</view>
        </template>
        <template v-if="item.feeStatus === 0 || item.feeStatus === 3 || item.feeStatus === 5" #extra>
          <image class="icon-choose" v-if="!item.choose" src="../../../static/icons/icon-checkbox.png"></image>
          <image class="icon-choose" v-else src="../../../static/icons/icon-checkbox-select.png" />
        </template>
        <ve-cell label="费用项" priceAlign="right">{{ item.feeName }}</ve-cell>
        <ve-cell-price label="费用金额" :value="item.totalAmount"></ve-cell-price>
        <ve-cell v-if="item.installment === 1" label="生成节点" priceAlign="right">{{ item.createNodeName }}</ve-cell>
        <ve-cell v-if="item.installment === 1" label="应结时间" priceAlign="right">{{ item.dueDate }}</ve-cell>
      </ve-card>
    </view>
    <ve-bottom-box>
      <view class="bottom-button" @click="all">
        <image
          class="all-choose"
          v-if="allChoose && idList.length == fee.carAssetFeeList.length"
          src="../../../static/icons/icon-checkbox-select.png"
        />
        <image class="all-choose" v-else src="../../../static/icons/icon-checkbox.png"></image>
        <view class="c3 fs28 fw400 all-choose-text">全选</view>
      </view>
      <ve-button type="primary" size="long" @click="next">批量结算</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getPurchaseFeeDetail, checkConfirm } from '@/api/asset/asset-fee'

  const fee = ref<any>({})
  const allChoose = ref(false)
  const idList = ref<any>([])
  const installmentIds = ref<any>([])

  const getDetail = async (id: any) => {
    const res: any = await getPurchaseFeeDetail({ carId: id, feeCategoryList: [0, 5, 6] })
    var feedata = res.result
    if (feedata.carAssetFeeList && feedata.carAssetFeeList.length > 0) {
      feedata.carAssetFeeList = feedata.carAssetFeeList
        .filter((item: any) => item.feeStatus !== 1)
        .filter((item: any) => item.feeStatus !== 2)
      feedata.carAssetFeeList.forEach((item: any) => {
        item.choose = false
      })
    }
    fee.value = feedata
  }

  const chooseFee = (i: any) => {
    fee.value.carAssetFeeList.forEach((item: any, index: number) => {
      if (i == index) {
        item.choose = !item.choose
        if (item.choose) {
          idList.value.push(item.id)
          installmentIds.value.push(item.payableNum)
        } else {
          idList.value = idList.value.filter((el: any) => el !== item.id)
          installmentIds.value = installmentIds.value.filter((el: any) => el !== item.payableNum)
        }
      }
    })
    if (idList.value.length == fee.value.carAssetFeeList.length) {
      allChoose.value = true
    }
  }
  const all = () => {
    allChoose.value = !allChoose.value
    if (allChoose.value) {
      idList.value = []
      installmentIds.value = []
      fee.value.carAssetFeeList.forEach((item: any) => {
        item.choose = true
        idList.value.push(item.id)
        installmentIds.value.push(item.payableNum)
      })
    } else {
      idList.value = []
      installmentIds.value = []
      fee.value.carAssetFeeList.forEach((item: any) => {
        item.choose = false
      })
    }
  }
  const next = () => {
    if (idList.value.length == 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择',
      })
      return false
    } else {
      checkConfirm({ businesId: fee.value.carAssetFeeList[0].businesId, idList: idList.value, installmentList: installmentIds.value }).then(
        (res: any) => {
          if (res.result) {
            console.log(fee, 'fee')
            uni.navigateTo({
              url: `/pages/asset/car-manager/confirm-fee?carId=${fee.value.carId}&idList=${JSON.stringify(idList.value)}&supplierType=${
                fee.value.carAssetFeeList[0].supplierType
              }&pagefrom=mergeConfirm`,
            })
          }
        },
      )
    }
  }
  onLoad((options: any) => {
    if (options.carId) {
      getDetail(options.carId)
    }
  })
</script>

<style lang="less" scoped>
  .ve-bottom-box {
    height: 132rpx;
  }
  page {
    height: auto;
  }
  .viewports {
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0 24rpx;
  }
  .tips {
    width: 100%;
    background: #e8f3ff;
    padding: 18rpx 32rpx;
    color: #1d2129;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 2;
  }
  .status-1 {
    background-color: rgba(255, 236, 232, 1);
    color: #f53f3f;
    border: 2rpx solid #f53f3f;
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .status-4 {
    background: rgba(232, 247, 255, 1);
    color: rgba(52, 145, 250, 1);
    border: 2rpx solid rgba(52, 145, 250, 1);
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .icon-choose {
    width: 36rpx;
    height: 34rpx;
    text-align: right;
  }
  .all-choose {
    width: 36rpx;
    height: 34rpx;
  }
  .bottom-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .all-choose-text {
      margin: 0 48rpx 0 16rpx;
    }
  }
</style>
